<template>
	<view class="page-content">
		<u-loading-page :loading="pageLoading" style="z-index: 10;"></u-loading-page>
		<view v-show="!pageLoading">
			<view class="bonus-top">
				<view class="bonus-top_amout p-t-md">
					<text class="text-xs m-b-xs">今日分红奖金池</text>
					<view>
						<text class="number text-md">{{ today_amount }}</text>
						<text class="text-xs">{{configInfo.money_company}}</text>
					</view>
				</view>
				<view class="flex-center m-t-sm">
					<text class="text-xs">昨日累计奖金池：{{yesterday_amount}}{{configInfo.money_company}}</text>
				</view>
				<view class="bonus-top_btns p-md" >
					<u-button class="btn" type="default" @click="receiveBonus" throttleTime="3000">
						<text v-if="user_receives < 1">领取昨日收益{{ user_amount }}{{configInfo.money_company}}</text>
						<text v-if="user_receives >= 1">领取昨日收益{{ user_amount }}{{configInfo.money_company}}</text>
					</u-button>
				</view>
			<!-- 	<view class="bonus-top_tips flex-center" v-if="user_receives >= 1 ">
					<text>今日您已领取，请明日再来吧</text>
				</view> -->
			</view>
			<view class="bonus-log" :offsetTop="0" bgColor="#ffffff">
				<view class="bonus-log_title flex-between" >
					<text>分红领取记录</text>
				</view>
				<m-loading :show="listLoad" :emptyShow="list.data.length <= 0"></m-loading>
				<view class="log-list" v-if="!listLoad">
					<view class="log-list_item flex-between p-t-md p-b-md" v-for="(item, index) in list.data" :key="item.id">
						<view>
							<view class="flex-start m-b-xs">
								<text class="text-xs">提取</text>
								<text class="number text-lg p-l-xs p-r-xs">{{item.amount}}</text>
								<text class="text-xs">{{ configInfo.money_company }}</text>
							</view>
							<text class="text-xs text-secondary m-t-md">{{item.create_time}}</text>
						</view>
						<view>
							<text class="text-warning" v-if="item.state == 1">
								{{ item.state_text }}
							</text>
							<text class="text-success" v-if="item.state == 2">
								{{ item.state_text }}
							</text>
						</view>
					</view>
					<uni-load-more :status="status" :content-text="contentText" v-if="showLoading"></uni-load-more>
				</view>
			</view>
			<side-tools :scrollTop="scrollTop"></side-tools>
		</view>
	</view>
</template>

<script>
	let timer = null;
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				yesterday_amount: '0.00', // 今日奖金池
				today_amount: '0.00', // 今日奖金池
				user_amount: '0.00' ,// 用户分红
				user_receives: 0,
				pageLoading: false,
				scrollTop: 0,
				showLoading:false,
				listLoad:true,
				listEmptyShow:false,
				status:"loading",
				param: {
					page: 1,
					state: '',
				},
				list: {
					data: [],
					last_page: 1,
					current_page: 1
				},
				piaodai: require('@/static/images/piaodai.png'),
			}
		},
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
			contentText: state => state.content.contentText,
		}),
		onShow(){
			this.init()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onUnload(){
			this.clearTimer()
		},
		onHide(){
			this.clearTimer()
		},
		async onReachBottom(){
			if (this.list.current_page >= this.list.last_page || this.ListLoad){
				this.status="nomore";
				return
			};
			this.status = "loading";
			this.showLoading = true;
			this.getList(this.param.page + 1);	
		},
		methods: {
			/**
			 * 初始化
			 */	
			init(){
			
					// this.getData()
					// 创建计时器
					timer = setInterval(async() => {
						await this.getData()
						if(this.pageLoading){
							this.pageLoading = !this.pageLoading
						}
					}, 3000);
					// 获取领取记录
					this.getList()
				
			},
			
			/**
			 * 获取分红数据
			 */
			async getData(){
				const res = await this.$api.plugin.getBonusData()
				let {
					amount,
					user_amount,
					receives
				} = res.data
				if(res.code == 200){
					this.today_amount = amount
					this.user_amount = user_amount
					this.user_receives = receives
				}
				// console.log('获取数据成功')
			},
			
			/**
			 * 销毁定时器
			 */
			clearTimer() {
				// clearTime
				if (timer) {
					clearInterval(timer);
					timer = null;
					console.log('定时器已销毁')
				}
			},
			/**
			 * 领取分红
			 */
			async receiveBonus(){
				const res = await this.$api.plugin.receiveBonus()
				if(res.code == 200){
					this.$util.showToast(res.msg, ()=>{
						this.getList(1)
					})
				}
			},
			
			
			/**
			 * 获取领取记录
			 */
			async getList(page = 0){
				if(page){
					this.param.page = page
				}
				const res = await this.$api.plugin.getBonusLogList(this.param)
				if(res.code == 200){
					let newList = res.data
					if(page > 1){
						newList.data = this.list.data.concat(newList.data) // 合并数组
					}
					this.list = newList
					this.listLoad = false;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.bonus-top{
		// background-color: #000;
		position: fixed;
		z-index: 1;
		top: 0;
		width: 100%;
		// height: 100%;
		color: #faf0c8;
		padding: 25rpx;
		padding-top: 50rpx;
		background: linear-gradient(45deg, #f85a4f, #ea2418);
		min-height: 250rpx;
		&_amout{
			
			display: flex;
			flex-flow: column;
			align-items: center;
		}
		&_amout .number{
			font-size: 60rpx!important;
			// background-color: #ffd426;
			padding: 5rpx 15rpx;
			border-radius: 25px;
			color: #ffd426
		}
		&_btns .btn{
			padding: 0 35rpx;
			border-radius: 25px;
			font-size: 28rpx;
			color: #555!important;
			background-color: #ffd426;
			border-bottom: 2px solid #ca101e;
		}
		&_btns .btn .number{
			color: #ca101e;
			margin: 0 10rpx;
		}
		&_tips{
			font-size: 26rpx;
		}
		padding-bottom: 100rpx;
	}
	.bonus-log{
		position: relative;
		margin-top: 380rpx;
		background-color: #fff;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		padding: 25rpx;
		min-height: 50vh;
		z-index: 2;
		&_title{
			font-size: 28rpx;
			font-weight: bold;
			padding-bottom: 20rpx;
			border-bottom: 1px solid #f3f3f3;
		}
		
	}
	.log-list{
		font-size: 26rpx;
		&_item{
			border-bottom: 1px solid #f3f3f3;
		}
		&_item:last-child{
			border: none;
		}
		// margin: 25rpx;
	}
</style>
